import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const CurveChart = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chartInstance = echarts.init(chartRef.current);

    const option = {
      title: {
        text: '订单增长趋势',
      },
      tooltip: {},
      xAxis: {
        type: 'time',
        boundaryGap: false,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '订单数量',
          data: [
            ['2024-06-01', 500],
            ['2024-07-01', 2000],
            ['2024-08-01', 1500],
            ['2024-09-01', 1200],
            ['2024-10-01', 1300],
            ['2024-11-01', 1100],
            ['2024-12-01', 1400],
          ],
          type: 'line',
          areaStyle: {},
        },
      ],
    };

    chartInstance.setOption(option);

    return () => {
      chartInstance.dispose();
    };
  }, []);

  return <div ref={chartRef} style={{ width: '100%', height: '400px', overflow: 'hidden' }} />;
};

export default CurveChart;